<template>
	<view class="course-cont">
		<!-- tabs顶部菜单 -->
		<view class="tabs">
			<view 
				class="tabs-item" 
				:class="{ 'tabs-active': index == tabIndex }" 
				v-for="(item, index) in tabs" 
				:key="index"
				@click="tabItemClick(index)" 
			>
				{{item}}
			</view>
			<view class="tabs-active-line" :style="{ left: tabIndex == 0 ? '30rpx' : '407rpx' }"></view>
		</view>
		<view class="bg-icon"></view>
		<!-- 列表 -->
		<swiper class="swiper" :current="tabIndex" @change="swiperChange">
			<!-- 我的课程 -->
			<swiper-item>
				<mescroll-item :i="0" :index="tabIndex" :tabs="tabs"></mescroll-item>
			</swiper-item>
			<!-- 全部课程 -->
			<swiper-item>
				<mescroll-item :i="1" :index="tabIndex" :tabs="tabs"></mescroll-item>
			</swiper-item>
		</swiper>
		<view class="bottom_shadow"></view>
	</view>
</template>

<script>
	import MescrollItem from "./com/mescroll-swiper-item.vue";
	
	export default {
		components: {
			MescrollItem,
		},
		data() {
			return {
				tabs: ["我的课程", "全部课程"],
				tabIndex: 0 // 当前tab的下标
			}
		},
		computed: {
			userAccredit() {
				return this.$store.state.userAccredit;
			}
		},
		onShow() {
			this.tabIndex = 0;
		},
		methods: {
			// tabItem 点击事件
			tabItemClick(index) {
				this.tabIndex = index
			},
			// 轮播菜单
			swiperChange(e){
				this.tabIndex = e.detail.current
			}
		},
		onLoad() {
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px'
		}
	}
</script>

<style lang="scss" scoped>
	.course-cont{
		padding-top: 80rpx;
		background-color: $uni-bg-color-grey;
	}
	.bg-icon{
		width: 100vw;
		height: 60rpx;
		background-size: 100% 100%;
		background-image: $bg-icon-main;
		background-color: $bg-color-main;
	}
	.tabs{
		background-color: $uni-text-color-inverse;
		height: 80rpx;
		display: flex;
		position: fixed;
		top: 0;
		z-index: 10;
		left: 0;
		width: 100vw;
		background-color: $bg-color-main;
		&-item{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			color: $color-white;
			position: relative;
			z-index: 2;
		}
		&-active{
			color: $text-color;
			font-weight: bold;
		}
		&-active-line{
			position: absolute;
			bottom: 0;
			top: 0;
			margin: auto;
			width: 313rpx;
			height: 64rpx;
			background-color: $color-white;
			border-radius: 15rpx;
			left: 30rpx;
			transition: left 0.5s cubic-bezier(0, 0, 0.1, 1.34);
		}
	}
	.swiper{
		height: calc(100vh - 140rpx);
		background-color: $bg-color;
	}
</style>
